<script setup lang="ts">
import { reactive } from 'vue'
import { BatchBtnItemType } from '@/common/types/conf'
import { useCurrentInstance } from '@/common/utils/methods'
const { $message } = useCurrentInstance();

const props = defineProps<{
  batchBtnList?: Array<BatchBtnItemType>
  totalNum: number
}>()

const emit = defineEmits<{
  (e: 'selection', enabledKey: string, enableValue: number | string): void
  (e: 'batchConfirm', status: number): void
  (e: 'reset'): void
}>()

const data = reactive({
  activeBtn: {} as BatchBtnItemType,
  selectNum: 0,
})

const batchAction = (btn: BatchBtnItemType) => {
  data.activeBtn = btn;
  emit('selection', btn.enabledKey, btn.enableValue)
}

const batchConfirm = () => {
  if (data.selectNum > 0) {
    emit('batchConfirm', data.activeBtn.status)
    resetBatch();
  } else {
    $message.warning('请选择要操作的列')
  }
}

const resetBatch = () => {
  data.activeBtn = {} as BatchBtnItemType
  data.selectNum = 0;
  emit('reset')
}

// 自定义筛选项 设置 params
const setSelectData = (val: Array<any>): void => {
  data.selectNum = val.length;
}
defineExpose({ setSelectData })

</script>

<template>
  <div class="list-btn-group">
    <div>
      <template v-if="data.activeBtn?.name">
        <el-button type="primary" @click="batchConfirm">确定批量{{ data.activeBtn.name }}</el-button>
        <el-button type="danger" @click="resetBatch">取消</el-button>
        <span style="margin-left:20px">已选（{{ data.selectNum }}/{{ totalNum }}）</span>
      </template>
      <template v-else>
        <el-button
          v-for="btn in batchBtnList"
          :key="btn.name"
          :type="btn.btnType as any"
          @click="batchAction(btn)"
        >批量{{ btn.name }}</el-button>
      </template>
    </div>
    <div class="custom-btn">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.list-btn-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.custom-btn {
  flex: 1;
  text-align: right;
}
</style>